<template>
	<view class="warpper">
		<carHeader :title="'就近加油'"></carHeader>
		<!-- 搜索框 -->
		<view class="sousuo">
			<view class="custom-search-bar">
				<input type="text" placeholder="输入需要搜索的内容" class="search-input" />
				<image src="/static/车联网服务-05就近加油_slices/搜索.png" class="search-icon" @click="searchInfo" />
			</view>
			<view class="qiehuan" @click="changeMode">
				<image src="/static/车联网服务-05就近加油_slices/组 5.png" class="circular-image"></image>
				<text class="mode-text">{{ currentMode }}</text>
			</view>
		</view>
		<!-- 数据列表 -->
		<view class="data-list" v-if="currentMode === '地图模式'">
			<view v-for="(item, index) in dataList" :key="index" class="list-item" @click="findStation">
				{{ item }}
			</view>
		</view>
		<!-- 加油站信息列表 -->
		<view v-for="(item, index) in stations" :key="index" class="jiayou-station" v-if="currentMode === '地图模式'">
			<!-- 第一块 -->
			<view class="one">
				<view class="station-name">{{ item.name }}</view>
				<view class="station-distance">
					{{item.distance}}
				</view>
			</view>
			<!-- 第二块 -->
			<view v-if="item.discount && item.discount.length > 0" class="two">
				<view v-for="(discountItem, discountIndex) in item.discount" :key="discountIndex"
					class="station-discount">
					{{ discountItem }}
				</view>

			</view>
			<!-- 第三块 -->
			<view class="three">
				<view @click="mendianDetails">
					<image :src="item.img" mode="widthFix" class="station-img"></image>
				</view>
				<view class="model">
					<view class="station-activetime">营业时间:{{ item.activeTime }}</view>

					<view class="station-price">
						￥{{ item.price }}/升
					</view>
					<view class="station-address">
						{{ item.address }}
						<image class="plane" src="/static/车联网服务-05就近加油_slices/plane.png" mode="widthFix"
							@click="daohang"></image>
					</view>

				</view>
			</view>
		</view>

		<!-- 加油站地图信息 -->
		<view class="ditu-station" v-if="currentMode === '列表模式'">
			<view>
				<map :latitude="latitude" :longitude="longitude" :markers="covers" class="ditu">
				</map>
			</view>
			<!-- 注意： 这里我就直接写死数据喽~~~~ -->
			<view class="xinxi">
				<view class="xinxi-left">
					<view class="xinxi-name">中国石油加油站</view>
					<view class="xinxi-address">山阳区人民路与解放军路交叉口</view>
					<!-- 点击跳转到门店详情 -->
					<view class="xinxi-details" @click="mendianDetails">
						<u-icon name="info-circle" color="#3F80EA" style="margin-right: 8rpx;"></u-icon>
						门店详情>>
					</view>
				</view>
				<view class="xinxi-right">
					<image
						src="https://fc1tn.baidu.com/it/u=1862534014,2374485642&fm=202&src=766&fc=tdmatt&mola=new&crop=v1"
						mode="widthFix" class="xinxi-photo"></image>
				</view>
			</view>

			<button type="primary" class="btn" @click="daohang">立即导航</button>

		</view>
		<!-- 跳转到消息界面 -->
		<view @click="navXiaoxi">
			跳转消息
		</view>
	</view>
</template>

<script>
	const img = '/static/logo.png';

	export default {
		data() {
			return {
				currentMode: '地图模式', // 初始模式文本  
				isMapMode: false, // 控制是否为地图模式的标志  
				// 油品种 数据
				dataList: ['90#', '92#', '93#', '95#', '97#', '98#'],
				// 加油站信息
				stations: [{
						name: '中国石油加油站',
						address: '山阳区人民路与解放路交叉口',
						discount: ['满200减20', '满500减60'],
						price: "5.66",
						activeTime: '周一到周五',
						img: 'https://fc1tn.baidu.com/it/u=1862534014,2374485642&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
						// 距离，先写死吧
						distance: "556m"
					},
					{
						name: '中国石油加油站',
						address: '山阳区人民路与解放路交叉口',
						discount: ['满200减20', '满500减60'],
						price: "5.66",
						activeTime: '周一到周五',
						img: 'https://fc1tn.baidu.com/it/u=1862534014,2374485642&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
						// 距离，先写死吧
						distance: "880m"
					}
				],
				// 地图相关信息：
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 34.826128,
				longitude: 113.558902,
				covers: [{
					latitude: 34.826128,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 34.826128,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}]
			}
		},
		methods: {
			// 点击搜索图标：搜索
			searchInfo() {
				console.log("~~~开始搜索~~~");
			},
			// 切换地图模式/列表模式 
			changeMode() {

				this.isMapMode = !this.isMapMode;
				// 更新文本内容  
				if (this.isMapMode) {
					this.currentMode = '列表模式';
				} else {
					this.currentMode = '地图模式';
				}
			},
			// 通过点击油的品种，选择station,还没实现
			findStation() {
				console.log("我还没被实现");
			},
			// 有列表时，点击小飞机-->导航
			daohang() {
				uni.navigateTo({
					/* 这里暂且传的是第一个数组的值 */
					url: "/pages/jiujinjiayou/daohang?name=" + this.stations[0].name + "&address=" + this.stations[
						0].address,
				})
			},
			// 跳转到门店详情页面
			mendianDetails() {
				uni.navigateTo({
					url: "/pages/jiujinjiayou/mendianxiangqing",
				})
			},
			/* 跳转到消息中心 */
			navXiaoxi() {
				uni.navigateTo({
					url: "/pages/xiaoxizhongxin/xiaoxizhongxin"
				})
			}
		},
	}
</script>

<style lang="scss">
	.warpper {
		position: relative;
	}

	/* 搜索部分 */
	.sousuo {
		display: flex;
		position: absolute;
		width: 90%;
		top: 100rpx;
		left: 50rpx;

		// 输入框的样式
		.custom-search-bar {
			border-radius: 42rpx;
			width: 68%;
			height: 76rpx;
			display: flex;
			align-items: center;
			/* 垂直居中 */
			background-color: #fff;
			padding: 0 20rpx;
			/* 内边距，这里设置为左右内边距，上下内边距为0 */


			.search-input {
				padding: 20rpx 0;
				/* 上下内边距，这里不设置左右内边距，因为已经由父容器的padding控制 */
				font-size: 26rpx;
				/* 字体大小，可根据需要调整 */
				color: #000;
				/* 字体颜色，可根据需要调整 */
			}

			.search-icon {
				width: 28rpx;
				height: 28rpx;
				/* 使用auto将图标推向右侧 */
				margin-left: auto;
				/* 图标与父容器右侧之间的间距 */
				margin-right: 20rpx;

			}
		}

		.qiehuan {

			position: relative;
			width: 120rpx;
			height: 120rpx;
			top: -24rpx;
			margin-left: 40rpx;

			.circular-image {
				width: 120rpx;
				height: 120rpx;
			}

			.mode-text {
				position: absolute;
				top: 50%;
				/* 相对于容器的顶部 */
				left: 50%;
				/* 相对于容器的左边 */

				// translate(-50%, -50%)被用来对元素进行平移,居中文字 
				transform: translate(-50%, -50%);
				color: #fff;
				/* 假设背景是深色的，所以文字用白色 */
				font-size: 28rpx;
			}
		}

	}

	/* list数据 */
	.data-list {
		display: flex;
		position: absolute;
		top: 176rpx;
		left: 10rpx;
		justify-content: space-around;
		width: 88%;
		padding: 36rpx;

		.list-item {
			display: flex;
			align-items: center;
			/* 垂直居中 */
			justify-content: center;
			/* 水平居中 */
			width: 48rpx;
			height: 32rpx;
			padding: 8rpx 20rpx;
			/* 列表项的内边距 */
			border: 2rpx solid #ddd;
			border-radius: 10rpx;
			color: #EEF2FD;
			font-size: 28rpx;
		}
	}

	/* 列表模式下展示 */
	/* 每一大块 */
	.jiayou-station {
		width: 88%;
		background-color: #fff;
		border-radius: 24rpx;
		position: relative;
		margin: 0rpx auto;
		top: -60rpx;
		padding: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 40rpx;

		/* 第一部分 */
		.one {
			margin-top: 10rpx;
			display: flex;

			.station-name {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			.station-distance {
				margin-left: 350rpx;
				color: #0055ff;
				font-size: 24rpx;
			}
		}

		/* 第二块 */
		.two {
			display: flex;
			justify-content: left;
			margin-top: 6rpx;
			/*  子元素在交叉轴上居中对齐 */
			align-items: center;

			.station-discount {
				height: 38rpx;
				padding: 2rpx;
				border: 2rpx solid white;
				background-color: #ffe4c9;
				color: rgba(255, 0, 0, 0.7);
				border-radius: 8rpx;
				margin-left: 10rpx;
				box-shadow: 4rpx 4rpx 8rpx rgba(255, 0, 127, 0.2);
			}
		}

		/* 第三块 */
		.three {
			display: flex;
			margin-top: 30rpx;

			.station-img {
				width: 260rpx;
				border-radius: 20rpx;
			}

			.model {
				margin-left: 26rpx;
			}

			.station-activetime {
				margin-top: 8rpx;
				margin-bottom: 0rpx;
				font-size: 22rpx;
				color: #000;

			}

			.station-price {
				font-size: 26rpx;
				color: #f56c6c;
				margin-top: 6rpx;
			}

			.station-address {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 22rpx;
				color: #000;
				margin-top: 6rpx;

				/* 小飞机图标 */
				.plane {
					width: 24rpx;
					margin-left: 16rpx;
				}
			}
		}


		.station-activetime {
			/* 营业时间样式 */
			color: #666;
			font-size: 14px;
			margin-bottom: 10px;
		}

		.station-address {
			/* 地址样式 */
			font-size: 14px;
			color: #333;
		}


	}


	/* 地图模式下展示 */
	.ditu-station {
		height: 1084rpx;
		width: 88%;
		position: absolute;
		top: 220rpx;
		left: 16rpx;
		border-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;

		.ditu {
			margin-top: 10rpx;
			height: 720rpx;
			width: 100%;

		}

		.xinxi {
			margin-top: 54rpx;
			display: flex;

			.xinxi-left {
				padding: 10rpx;

				.xinxi-name {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
				}

				.xinxi-address {
					font-size: 22rpx;
					color: #000;
					margin-bottom: 6rpx;
				}

				.xinxi-details {
					display: flex;
					color: #3F80EA;
					font-size: 24rpx;
					margin-bottom: 26rpx;
				}
			}

			.xinxi-right {

				margin-left: 72rpx;

				.xinxi-photo {
					width: 260rpx;
				}
			}

		}
	}

	/* 按钮 */
	.btn {
		margin-top: 20rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70rpx;
		margin-bottom: 30rpx;
		font-size: 32rpx;
	}
</style>